@import "../../../common/static/lib/css/root.less";
@cycle-bg:#66f;
@blue:#6766ff;
@yellow: #504fc5;

.index-index{
  background: #f0f4f5;
  font-size:14px;
  color: #3a3a3a;

  .line{
    height: 30px;
    background: url(./image/line.png) no-repeat center center;
  }
  .line1{
    background-position: center 0;
  }
  .line2{
    background-position: center -30px;
  }
  .line3{
    background-position: center -60px;
  }
  .line4{
    background-position: center -90px;
  }
  .line5{
    background-position: center -120px;
  }


  .summary{
    //特征
    padding-top:30px;
    .features{
      padding:40px 0;
      .block{
        width:33%;
        float: left;
        span{
          display: block;
        }
        .icon{
          width: 150px;
          height: 150px;
          margin:0 auto;
          background: url(./image/features.png) no-repeat;
          .transition(all .5s ease);
        }
        .icon1{
          background-position: 0 0;
        }
        .icon2{
          background-position: 0 -150px;
        }
        .icon3{
          background-position: 0 -300px;
        }
        .name{
          height: 70px;
          line-height: 70px;
          text-align: center;
        }
        .detail{
          padding:0 20px;
          line-height: 25px;
        }
      }

      .block:hover{
        background: #f7f9fa;
        .icon{
          .transform(scale(1.1));
        }
        .detail{
          color:#000;
        }
      }
    }

    .news{
      height: 50px;
      background:url(./image/news.png) no-repeat left center;
      border-top:1px solid #e8e8e8;
      padding-left:30px;
      .btn{
        float: right;
        margin-top:10px;
        font-size:13px;
      }
      .news-title{
        height: 50px;
        line-height: 50px;
        width: 700px;
        overflow: hidden;
        float: left;
      }
      .news-time{
        height: 50px;
        line-height: 50px;
        overflow: hidden;
        float: left;
      }
    }
  }

  //产品列表
  .products{
    padding:40px 0;
    .block{
      padding-bottom:25px;
      cursor: pointer;
      .product{
        width:485px;
        background: #fff;
        border:1px solid #ebebeb;
        cursor: pointer;
        .product-content{
          padding:20px 40px;
          .features{
            height: 250px;
          }
          .recharge{
            padding:10px 0;
            border-top:1px solid #d3d3d3;
            .tip{
              height: 40px;
              line-height: 40px;
            }
            .btn-container{
              padding:20px;
              text-align: center;
            }
          }
        }
      }

      .product:hover{
        box-shadow: 5px 5px 5px #dddddd;
      }
    }

    .icon{
      .transition(all .5s ease);
      width:50px;
      height: 50px;
      display: block;
      background: #f0f4f5 url(./image/icon.jpg) no-repeat;
      .border-radius(25px);
    }

    .icon1{
      background-position: 0 0;
    }
    .icon2{
      background-position: 0 -50px;
    }
    .icon3{
      background-position: 0 -100px;
    }
    .icon4{
      background-position: 0 -150px;
    }
    .icon5{
      background-position: 0 -200px;
    }

    //活期
    .demand-block{
      float: left;
      .features{
        .year-profit{
          float: left;
          position: relative;
          color:#fff;
          margin-top:30px;
          .profit-rate{
            width: 180px;
            height: 180px;
            .border-radius(90px);
            line-height: 180px;
            font-size:60px;
          }
        }

        .items{
          width: 180px;
          float: right;
          margin-top:30px;
          .icon{
            width: 50px;
            height: 50px;
            margin:0 auto;
            .transition(all .5s ease);
            .border-radius(50px);
          }
          .item{
            line-height: 50px;
            margin-bottom:15px;
            i{
              float: left;
            }
            span{
              margin-left:20px;
            }
          }
        }
      }
    }

    .term-block{
      float: right;
        .features{
          table{

            width: 100%;
            tr{
              td{
                text-align: center;
                padding-top:30px;
                .profit-rate{
                  width: 90px;
                  height: 90px;
                  margin:0 auto;
                  line-height: 90px;
                  font-size:50px;
                  .border-radius(45px);
                }
              }
            }
          }

          .text{
            text-align: center;
            margin-top:30px;
          }
        }
    }
  }


  .user-voice{
     background: #fff;
  }
  .media{
    background: #f0f4f5 url(./image/media.png) no-repeat center center;
    height: 120px;
  }
  .guide{
    height: 230px;
    background: #2d2d6e;
  }
  .footer{
    height: 330px;
    background: #323333;
  }
}